<template>
	<view class="submit-order">
		<!-- 收货地址 -->
		<view class="address-section" @click="selectAddress">
			<view class="address-info" v-if="selectedAddress">
				<text class="address-name">{{selectedAddress.name}}</text>
				<text class="address-phone">{{selectedAddress.phone}}</text>
				<text class="address-detail">{{selectedAddress.detail}}</text>
			</view>
			<view class="no-address" v-else>
				<text class="add-text">+ 添加收货地址</text>
			</view>
			<text class="address-arrow">></text>
		</view>

		<!-- 配送方式 -->
		<view class="delivery-section">
			<view class="section-title">配送方式</view>
			<view class="delivery-options">
				<view class="delivery-option" 
					v-for="option in deliveryOptions" 
					:key="option.type"
					:class="{active: selectedDelivery === option.type}"
					@click="selectDelivery(option.type)">
					<text class="option-name">{{option.name}}</text>
					<text class="option-price">{{option.price > 0 ? `+¥${option.price}` : '免费'}}</text>
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="products-section">
			<view class="section-title">商品信息</view>
			<view class="product-list">
				<view class="product-item" v-for="item in orderProducts" :key="item.id">
					<image class="product-image" :src="item.image" mode="aspectFill"></image>
					<view class="product-info">
						<text class="product-name">{{item.name}}</text>
						<text class="product-spec">{{item.spec}}</text>
						<view class="product-bottom">
							<text class="product-price">¥{{item.price}}</text>
							<text class="product-quantity">x{{item.quantity}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-item">
				<text class="info-label">商品金额</text>
				<text class="info-value">¥{{orderAmount.product}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">配送费</text>
				<text class="info-value">¥{{orderAmount.delivery}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">优惠券</text>
				<text class="info-value">-¥{{orderAmount.coupon}}</text>
			</view>
			<view class="info-item total">
				<text class="info-label">实付款</text>
				<text class="info-value total-price">¥{{orderAmount.total}}</text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="price-info">
				<text class="total-text">合计：</text>
				<text class="total-price">¥{{orderAmount.total}}</text>
			</view>
			<button class="submit-btn" @click="submitOrder">提交订单</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 收货地址
const selectedAddress = ref({
	name: '张三',
	phone: '138****8888',
	detail: '北京市朝阳区某某街道某某小区1号楼101室'
})

// 配送方式
const deliveryOptions = ref([
	{ type: 'takeout', name: '外送到家', price: '5.00' },
	{ type: 'instore', name: '堂食', price: '0.00' },
	{ type: 'pickup', name: '到店自取', price: '0.00' }
])

const selectedDelivery = ref('takeout')

// 商品列表
const orderProducts = ref([
	{
		id: 1,
		name: '经典奶茶',
		spec: '标准糖',
		price: '15.00',
		quantity: 2,
		image: '/static/goods/goods01.jpg'
	},
	{
		id: 2,
		name: '拿铁咖啡',
		spec: '少糖',
		price: '22.00',
		quantity: 1,
		image: '/static/goods/goods02.jpg'
	}
])

// 订单金额计算
const orderAmount = computed(() => {
	const productTotal = orderProducts.value.reduce((total, item) => {
		return total + (parseFloat(item.price) * item.quantity)
	}, 0)
	
	const deliveryPrice = parseFloat(deliveryOptions.value.find(opt => opt.type === selectedDelivery.value).price)
	const couponDiscount = 3.00 // 优惠券折扣
	
	return {
		product: productTotal.toFixed(2),
		delivery: deliveryPrice.toFixed(2),
		coupon: couponDiscount.toFixed(2),
		total: (productTotal + deliveryPrice - couponDiscount).toFixed(2)
	}
})

// 选择收货地址
const selectAddress = () => {
	uni.navigateTo({
		url: '/pages_my/address/index'
	})
}

const selectDelivery = (type) => {
	selectedDelivery.value = type
}

const submitOrder = () => {
	if (!selectedAddress.value) {
		uni.showToast({
			title: '请选择收货地址',
			icon: 'none'
		})
		return
	}
	
	uni.showModal({
		title: '确认订单',
		content: `订单金额：¥${orderAmount.value.total}`,
		success: (res) => {
			if (res.confirm) {
				// 提交订单逻辑
				uni.showLoading({
					title: '提交中...'
				})
				
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '订单提交成功',
						icon: 'success'
					})
					
					// 跳转到订单详情页
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages_my/myOrder/index'
						})
					}, 1500)
				}, 2000)
			}
		}
	})
}

onLoad((options) => {
	console.log('提交订单页面加载', options)
})
</script>

<style scoped>
.submit-order {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

/* 收货地址 */
.address-section {
	background: white;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.address-info {
	flex: 1;
}

.address-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-right: 20rpx;
}

.address-phone {
	font-size: 28rpx;
	color: #666;
}

.address-detail {
	font-size: 26rpx;
	color: #999;
	display: block;
	margin-top: 10rpx;
}

.no-address {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
}

.add-text {
	font-size: 28rpx;
	color: #666;
}

.address-arrow {
	font-size: 24rpx;
	color: #ccc;
}

/* 配送方式 */
.delivery-section {
	background: white;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.delivery-options {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.delivery-option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx;
	border: 2rpx solid #eee;
	border-radius: 10rpx;
}

.delivery-option.active {
	border-color: #ff6b6b;
	background: rgba(255, 107, 107, 0.1);
}

.option-name {
	font-size: 28rpx;
	color: #333;
}

.option-price {
	font-size: 26rpx;
	color: #ff6b6b;
}

/* 商品列表 */
.products-section {
	background: white;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.product-list {
	margin-top: 20rpx;
}

.product-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.product-item:last-child {
	border-bottom: none;
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.product-spec {
	font-size: 24rpx;
	color: #999;
	display: block;
	margin-bottom: 15rpx;
}

.product-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-price {
	font-size: 28rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.product-quantity {
	font-size: 26rpx;
	color: #666;
}

/* 订单信息 */
.order-info {
	background: white;
	padding: 30rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.info-item:last-child {
	border-bottom: none;
}

.info-item.total {
	border-top: 1rpx solid #eee;
	margin-top: 10rpx;
	padding-top: 20rpx;
}

.info-label {
	font-size: 28rpx;
	color: #666;
}

.info-value {
	font-size: 28rpx;
	color: #333;
}

.total-price {
	font-size: 32rpx;
	color: #ff6b6b;
	font-weight: bold;
}

/* 底部操作栏 */
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: white;
	border-top: 1rpx solid #eee;
	padding: 20rpx 30rpx;
	height: 100rpx;
}

.price-info {
	display: flex;
	align-items: center;
}

.total-text {
	font-size: 28rpx;
	color: #333;
}

.total-price {
	font-size: 36rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.submit-btn {
	background: #ff6b6b;
	color: white;
	border: none;
	border-radius: 50rpx;
	padding: 10rpx 60rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-left: 200rpx;
}
</style>